<div class="ng-image-preview-overlay" ng-class="{'ng-image-preview-overlay--visible': visible}">
  <div class="ng-image-preview-overlay__mask" ng-click="close($event)"></div>
  <div
    class="ng-image-preview-overlay__container"
    role="dialog"
    aria-modal="true"
    ng-style="getContainerStyle()"
    ng-mousedown="startDrag($event)"
  >
    <button
      type="button"
      class="ng-image-preview-overlay__close"
      ng-click="close($event)"
      aria-label="关闭预览"
    >
      <span aria-hidden="true">×</span>
    </button>
    <div class="ng-image-preview-overlay__caption" ng-if="title" ng-bind="title"></div>
    <div
      class="ng-image-preview-overlay__image-wrapper"
      ng-class="{
        'ng-image-preview-overlay__image-wrapper--draggable': isImageDraggable(),
        'ng-image-preview-overlay__image-wrapper--dragging': imageDragging
      }"
      ng-mousedown="startImageDrag($event)"
    >
      <img
        class="ng-image-preview-overlay__image"
        ng-src="{{ imageSrc }}"
        alt="{{ alt || title || '图片预览' }}"
        ng-style="getImageStyle()"
      />
    </div>
    <div class="ng-image-preview-overlay__toolbar">
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="缩小"
        aria-label="缩小"
        ng-click="zoomOut()"
        ng-disabled="!canZoomOut()"
      >
        <svg class="ng-image-preview-overlay__icon" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"></circle>
          <line x1="7" y1="10" x2="13" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
          <line x1="15.5" y1="15.5" x2="20" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
        </svg>
      </button>
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="放大"
        aria-label="放大"
        ng-click="zoomIn()"
        ng-disabled="!canZoomIn()"
      >
        <svg class="ng-image-preview-overlay__icon" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"></circle>
          <line x1="7" y1="10" x2="13" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
          <line x1="10" y1="7" x2="10" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
          <line x1="15.5" y1="15.5" x2="20" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
        </svg>
      </button>
      <div class="ng-image-preview-overlay__toolbar-divider" role="separator"></div>
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="向左旋转"
        aria-label="向左旋转"
        ng-click="rotateLeft()"
      >
        <svg
          class="ng-image-preview-overlay__icon ng-image-preview-overlay__icon--rotate-left"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            d="M12 5a7 7 0 1 1-7 7"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <polyline
            points="12 5 18 5 18 11"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></polyline>
        </svg>
      </button>
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="向右旋转"
        aria-label="向右旋转"
        ng-click="rotateRight()"
      >
        <svg class="ng-image-preview-overlay__icon ng-image-preview-overlay__icon--rotate-right" viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M12 5a7 7 0 1 1-7 7"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <polyline
            points="12 5 18 5 18 11"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></polyline>
        </svg>
      </button>
      <div class="ng-image-preview-overlay__toolbar-divider" role="separator"></div>
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="水平翻转"
        aria-label="水平翻转"
        ng-click="flipHorizontal()"
      >
        <svg class="ng-image-preview-overlay__icon" viewBox="0 0 24 24" aria-hidden="true">
          <rect x="5" y="5" width="6" height="14" fill="currentColor" opacity="0.6"></rect>
          <rect x="13" y="5" width="6" height="14" fill="currentColor"></rect>
          <line
            x1="12"
            y1="5"
            x2="12"
            y2="19"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            opacity="0.8"
          ></line>
        </svg>
      </button>
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="垂直翻转"
        aria-label="垂直翻转"
        ng-click="flipVertical()"
      >
        <svg class="ng-image-preview-overlay__icon" viewBox="0 0 24 24" aria-hidden="true">
          <rect x="5" y="5" width="14" height="6" fill="currentColor" opacity="0.6"></rect>
          <rect x="5" y="13" width="14" height="6" fill="currentColor"></rect>
          <line
            x1="5"
            y1="12"
            x2="19"
            y2="12"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            opacity="0.8"
          ></line>
        </svg>
      </button>
      <div class="ng-image-preview-overlay__toolbar-divider" role="separator"></div>
      <div class="ng-image-preview-overlay__toolbar-text">
        {{ (zoom * 100) | number:0 }}%
      </div>
      <button
        type="button"
        class="ng-image-preview-overlay__toolbar-btn"
        title="重置视图"
        aria-label="重置视图"
        ng-click="resetView()"
        ng-disabled="!canResetView()"
      >
        <svg class="ng-image-preview-overlay__icon" viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M12 5a7 7 0 1 1-6.3 3.8"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <polyline
            points="5 5 10 5 10 10"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></polyline>
        </svg>
      </button>
    </div>
  </div>
</div>
